<template>
  <div class="card-box" @click="handleToDetail(book_id)">
    <van-image :src="image" class="cover" fit="cover" lazy-load>
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <div class="name van-ellipsis">{{ name }}</div>
    <div class="writer van-ellipsis">{{ writer }}</div>
  </div>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  name: {
    type: String,
    reqiured: true,
    default: '未知'
  },
  writer: {
    type: String,
    reqiured: true,
    default: '未知'
  },
  book_id: {
    type: Number,
    reqiured: true,
    default: 0
  },
  image: {
    type: String
  }
})

const router = useRouter()

const handleToDetail = (book_id: number) => {
  router.push({
    name: 'Detail',
    params: {
      book_id
    }
  })
}
</script>
<style lang="scss" scoped>
.card-box {
  display: inline-block;
  width: 70px;

  .cover {
    height: 100px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100px 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .name {
    font-size: 12px;
    font-family: Alibaba PuHuiTi;
    font-weight: 600;
    color: rgba(6, 27, 65, 0.75);
    line-height: 12px;
    margin-bottom: 5px;
    margin-left: 1px;
  }

  .writer {
    font-size: 10px;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: rgba(6, 27, 65, 0.35);
    margin-left: 1px;
  }
}
</style>
